<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>Vue 测试实例</title>
  <script src="vue@2.7.16.js"></script>
</head>

<style>
  .tbdr {
    background: #444;
    color: #d85b5b;
  }
</style>

<body>
  <div id="app">
    <p>{{ message }}</p>

    <!-- Vue 提供了 v-model 指令，它能轻松实现表单输入和应用状态之间的双向绑定。 -->
    <input v-model="message">

    <div v-bind:title="time">鼠标悬停几秒钟查看此处动态绑定的提示信息！</div>

    <!-- v-if 指令 控制切换一个元素是否显示也相当简单： -->
    <p v-if="seen">现在你看到我了</p>

    <!-- v-for 指令可以绑定数组的数据来渲染一个项目列表 -->
    <ol>
      <li v-for="it in todos">
        {{ it.text }}
      </li>
    </ol>

    <!-- 处理用户输入 -->
    <button v-on:click="reverseMessage">反转消息</button>

    <p>{{ details() }}</p>
    <p v-html="htmlMessage"></p>
    <p v-bind:class="henddd">张三的歌</p>
    <p>{{ 1 + 2 + 3}}</p>
    <p>{{ "12345".split("").reverse().join('')}}</p>

    <todo-item todo="123"></todo-item>
    <todo-item></todo-item>
    <todo-item todo="567"></todo-item>

    <test></test>
  </div>

  <script>
    // 定义名为 todo-item 是全局注册的组件
    Vue.component('todo-item', {
      props: ['todo'],
      template: '<li>这是个待办项 {{ todo }}</li>'
    })

    var data = {
      message: 'Hello Vue.js 2!',
      time: '页面加载于 ' + new Date().toLocaleString(),
      seen: true,
      todos: [
        { text: '学习 JavaScript' },
        { text: '学习 Vue' },
        { text: '整个牛项目' }
      ],
      htmlMessage: '<h1>菜鸟教程</h1>',
      henddd: "tbdr",
    }
    var vm = new Vue({
      el: '#app',
      data: data,
      methods: {
        details: function () {
          return this.message + " - 学的不仅是技术，更是梦想！";
        },
        reverseMessage: function () {
          this.message = this.message.split('').reverse().join('')
        },
      },
      components: {
        // 局部注册
        test: {
          template: "<h2>哈哈哈哈</h2>"
        }
      }
    })

    // 它们引用相同的对象！
    document.write(vm.message === data.message) // true
    document.write("<br>")
    // 设置属性也会影响到原始数据
    vm.message = "hello"
    document.write(data.message + "<br>") // Runoob

    // ……反之亦然
    // data.message = 1234
    // document.write(vm.message) // 1234

    // Vue 实例还提供了一些有用的实例属性与方法。它们都有前缀 $，以便与用户定义的属性区分开来
    document.write("<br>")
    document.write(vm.$data === data) // true

    document.write("<br>")
    document.write(vm.$el === document.getElementById('app')) // true
  </script>
</body>

</html>